import echarts from 'echarts'


const taskOption = (newOption, data) => {
  if (newOption) {
    const option = {
      // backgroundColor:'rgba(19, 52, 89, .5)',
      backgroundColor: 'rgba(255, 255, 255, 0)',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
          color: '#CFE3FC',
        },
        borderWidth: 1,
        formatter: function (params) {
          let str = ''
          for (let i = 0; i < params.length; i++) {
            if (i == 0) {
              str += `${params[i].name}<br/>${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[0].data}</span>%<br/>`;
              continue;
            }
            str += `${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[i].data}</span>个<br/>`
          }
          return str
        }
      },
      legend: [{
        data: data.legendData,
        orient: 'vertical',
        top: '40',
        right: '12%',
        x: '10%',
        itemWidth: 20,
        itemHeight: 5,
        borderColor: 'rgba(255, 192, 0, 1)',
        textStyle: {
          color: '#c1cadf',
          fontSize: 10
        }
      }, ],
      grid: {
        left: '9%',
        right: '2%',
        top: '30%',
        bottom: '10%',
        containLabel: true
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center'
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisTick: {
          show: false
        },
        data: data.Xdata,
        axisLine: {
          lineStyle: {
            color: 'rgba(51, 176, 255, 1)'
          }
        },
        axisLabel: {
          interval: 0,
          color: 'rgba(207, 227, 252, 1)',
          fontSize: 9
        }
      }],
      yAxis: [{
          type: 'value',
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(120, 160, 236, 1)'
            },
            symbol: ['none', 'arrow'],
            symbolSize: [5, 12],
            symbolOffset: [0, 10]
          },
          max: data.Ydata,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: 'rgba(207, 227, 252, 1)'
            },
            fontSize: '80%'
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(39, 57, 75, 1)',
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [{
          name: data.legendData[0],
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(98, 227, 255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(98, 227, 255, 0)'
              }
            ])
          },
          data: data.taskOptionData1,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: '#FFFFFF',
              borderColor: '#fff',
              lineStyle: {
                color: '#2FF3F1'
              }
            }
          }
        },
        {
          type: 'bar',
          name: data.legendData[1],
          itemStyle: {
            normal: {
              color: '#4ea4f3'
            }
          },
          barWidth: 10,
          data: data.taskOptionData2
        },
        {
          type: 'bar',
          name: data.legendData[2],
          itemStyle: {
            normal: {
              color: '#2FF3F1'
            }
          },
          barWidth: 10,
          data: data.taskOptionData3
        }
      ]
    }
    return option
  } else {
    return {
      series: [{
          data: data.leisure
        },
        {
          data: data.occupation
        }
      ]
    }
  }
}

const disposalOption = (newOption, data) => {
  if (newOption) {
    const option = {
      // backgroundColor:'rgba(19, 52, 89, .5)',
      backgroundColor: 'rgba(255, 255, 255, 0)',

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
          color: '#CFE3FC',
        },
        borderWidth: 1,
        formatter: function (params) {
          let str = ''
          for (let i = 0; i < params.length; i++) {
            if (i == 0) {
              str += `${params[i].name}<br/>${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[0].data}</span>%<br/>`;
              continue;
            }
            str += `${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[i].data}</span>个<br/>`
          }
          return str
        }
      },
      legend: [{
        data: data.legendData,
        top: '50',
        x: '10%',
        left: '10%',
        itemWidth: 20,
        itemHeight: 10,
        borderColor: 'rgba(255, 192, 0, 1)',
        textStyle: {
          color: '#c1cadf',
          fontSize: 10
        }
      }, ],
      grid: {
        left: '2%',
        right: '2%',
        top: '30%',
        bottom: '10%',
        containLabel: true
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center'
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisTick: {
          show: false
        },
        data:data.Xdata,
        axisLine: {
          lineStyle: {
            color: 'rgba(51, 176, 255, 1)'
          }
        },
        axisLabel: {
          interval: 0,
          color: 'rgba(207, 227, 252, 1)',
          fontSize: 9
        }
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(120, 160, 236, 1)'
          },
          symbol: ['none', 'arrow'],
          symbolSize: [5, 12],
          symbolOffset: [0, 10]
        },
        max: data.Ydata,
        min: 0,
        // splitNumber:50,
        axisLabel: {
          interval: 0,
          color: 'rgba(207, 227, 252, 1)',
          fontSize: '80%',
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(39, 57, 75, 1)',
            width: 1,
            type: 'solid'
          }
        },
      }, ],
      series: [{
          name: '网安事件的条数',
          type: 'line',
          showAllSymbol: true,
          symbolSize: 0,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            normal: {
              width: 5,
              color: "rgba(25,163,223,1)", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
            color: "rgba(25,163,223,1)",
            borderColor: "#646ace",
            borderWidth: 2
          },
          tooltip: {
            show: false
          },
          // data: [100, 130, 150, 200, 240, 250, 170, 160, 100, ],
          data: data.disposalOption1
        },
        {
          name: '已完成网安事件的条数',
          type: 'line',
          showAllSymbol: true,
          symbolSize: 0,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            normal: {
              width: 5,
              color: "#2FF3F1", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
            color: "rgba(25,163,223,1)",
            borderColor: "#646ace",
            borderWidth: 2
          },
          tooltip: {
            show: false
          },
          data: data.disposalOption2
        },
        {
        barGap: '-3%',
          type: 'bar',
          yAxisIndex: 0,
          name: '网安事件条数',
          itemStyle: {
            normal: {
              color: '#4ea4f3',
              barBorderRadius:[20,20, 0, 0]
            }
          },
          barWidth: 10,
          data: data.disposalOption3,
          tooltip: {
            show: false
          },
        },
        {
          type: 'bar',
          yAxisIndex: 0,
          name: '已完成网安事件条数',
          itemStyle: {
            normal: {
              color: '#2FF3F1',
              barBorderRadius:[20,20, 0, 0]
            }
          },
          barWidth: 10,
          data: data.disposalOption4,
          tooltip: {
            show: false
          },
        }
      ]
    }
    return option
  } else {
    return {
      series: [{
          data: data.leisure
        },
        {
          data: data.occupation
        }
      ]
    }
  }
}

const situationalOption = (newOption, data) => {
  if (newOption) {
    const option = {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      color: ['#2FF3F1', '#fbbc05', '#ea4335', ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          color: '#fff',
        },
        borderWidth: 1,
        formatter: function (params) {
          let str = ''
          for (let i = 0; i < params.length; i++) {
            if (i == 0) {
              str += `${params[i].name}<br/>${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[0].data}</span>%<br/>`;
              continue;
            }
            str += `${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}<br/><span>${params[i].data}</span>个<br/>`
          }
          return str
        }
      },
      legend: [{
        data: data.legendData,
        top: '50',
        left: '75%',
        x: '10%',
        orient: 'vertical',
        itemWidth: 20,
        itemHeight: 5,
        icon: 'roundRect',
        textStyle: {
          color: '#fff',
          fontSize: 8
        }
      }, ],
      grid: {
        left: '2%',
        right: '3%',
        top: '30%',
        bottom: '10%',
        containLabel: true
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        x: 'right',
        y: 'center'
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisTick: {
          show: false
        },
        data: data.Xdata,
        axisLine: {
          lineStyle: {
            color: 'rgba(51, 176, 255, 1)'
          }
        },
        axisLabel: {
          interval: 0,
          color: 'rgba(207, 227, 252, 1)',
          fontSize: 9
        }
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(120, 160, 236, 1)'
          },
          symbol: ['none', 'arrow'],
          symbolSize: [5, 12],
          symbolOffset: [0, 10]
        },
        max: data.Ydata,
        min: 0,
        // splitNumber:50,
        axisLabel: {
          interval: 0,
          color: 'rgba(207, 227, 252, 1)',
          fontSize: '80%'
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(39, 57, 75, 1)',
            width: 1,
            type: 'solid'
          }
        },
      }, ],
      series: [{
          name: '一般舆情信息',
          type: 'line',
          showAllSymbol: true,
          symbolSize: 0,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            width: 5,
          },
          tooltip: {
            show: false
          },
          // data: [100, 130, 150, 200, 240, 250, 170, 160, 100, ],
          data: data.situationalOption1
        },
        {
          name: '敏感舆情信息',
          type: 'line',
          showAllSymbol: true,
          symbolSize: 0,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            width: 5,
          },
          tooltip: {
            show: false
          },
          data: data.situationalOption2
        },
        {
          name: '重特大舆情信息',
          type: 'line',
          showAllSymbol: true,
          symbolSize: 0,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            width: 5,
          },
          tooltip: {
            show: false
          },
          data: data.situationalOption3
        },
      ]
    }
    return option
  } else {
    return {
      series: [{
          data: data.leisure
        },
        {
          data: data.occupation
        }
      ]
    }
  }
}

const securityOption = (newOption, data) => {
  if (newOption) {
    const option = {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      color: ['#ea4335','#e2bf25', '#4ea4f3', '#2FF3F1', ],
      legend: [{
        data: data.allData,
        top: '50',
        right: '10%',
        x: '10%',
        orient: 'vertical',
        itemWidth: 20,
        itemHeight: 5,
        icon: 'roundRect',
        textStyle: {
          color: '#fff',
          fontSize: 8
        }
      }, ],
      series: [{
        zlevel: 1,
        name: '漏斗图',
        type: 'funnel',
        left: '17%',
        top: '20%',
        //x2: 80,
        bottom: '15%',
        width: '80%',
        // height: {totalHeight} - y - y2,
        min: 0,
        max: 120,
        minSize: '0%',
        maxSize: '100%',
        sort: 'ascending',
        gap: 2,
        label: {
          show: true,
          position: 'right',
          width: '200px',
          align: 'right',
          fontSize: '15',
          // formatter: function (params) {
          //   return params.data.name + ':' + params.data.reaVal + '%';
          // }
        },
        labelLine: {
          length: 20,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20,
          }
        },
        data: [
          {
            value: data.securityOption1,
            name:  data.allData[0],
            reaVal: data.reaValdata[0]
          },{
            value: data.securityOption2,
            name:  data.allData[1],
            reaVal: data.reaValdata[1]
          },
          {
            value: data.securityOption3,
            name:  data.allData[2],
            reaVal: data.reaValdata[2]
          },
          {
            value: data.securityOption4,
            name: data.allData[3],
            reaVal: data.reaValdata[3]
          }
        ]
      }, ]
    }
    return option
  } else {
    return {
      series: [{
          data: data.leisure
        },
        {
          data: data.occupation
        }
      ]
    }
  }
}

const levelOption = (newOption, data) => {
  if (newOption) {
    const option = {
      color: ['#2FF3F1', '#fbbc05', '#ea4335'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        orient: 'vertical',
        top: '10%',
        left: '75%',
        textStyle: {
          color: '#c1cadf',
          fontSize: 10
        },
        data: data.legendData
      },
      series: [{
        name: '信息',
        type: 'pie',
        radius: ['20%', '50%'],
        center: ['50%', '55%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          fontSize: '10',
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '20',
            fontWeight: 'bold',
          }
        },
        labelLine: {
          lineStyle: {
            color: '#fff',
          },
          smooth: 0.2,
          length: 10,
          length2: 20,
        },
        data: [{
            value: data.levelOption1,
            name: '一般舆情信息'
          },
          {
            value: data.levelOption2,
            name: '敏感舆情信息'
          },
          {
            value: data.levelOption3,
            name: '重特大舆情信息'
          },
        ]
      }]
    }
    return option
  } else {
    return {
      series: [{
          data: data.leisure
        },
        {
          data: data.occupation
        }
      ]
    }
  }
}



export default {
  taskOption,
  disposalOption,
  situationalOption,
  securityOption,
  levelOption,
}